import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { IEchartsProps } from '@/types'

const LineCharts: React.FC<IEchartsProps> = props => {
  const echartRef = useRef(null)
  const data = {
    label: ['11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
    order: [58, 129, 645, 353, 819, 329, 444, 313, 127, 494, 855, 116],
    money: [393, 308, 900, 476, 162, 210, 821, 148, 768, 723, 884, 706]
  }
  useEffect(() => {
    initEcharts()
  }, [])

  const initEcharts = () => {
    const myEcharts = echarts.init(echartRef.current)
    const option = {
      // title: {
      //   text: '订单和流水走势图'
      // },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['订单', '流水']
      },
      grid: {
        left: 50,
        right: 50,
        bottom: 20
      },
      xAxis: {
        data: data.label
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单',
          type: 'line',
          data: data.order
        },
        {
          name: '流水',
          type: 'line',
          data: data.money
        }
      ]
    }
    myEcharts.setOption(option)
  }

  return <div ref={echartRef} style={{ width: props.width, height: props.height }}></div>
}

export default LineCharts
